<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%;background-color: #000000;"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript">
      var dom = document.getElementById("container");
      let myChart = echarts.init(dom);
      option = null;
      
	  var placeHolderStyle = {
	    normal: {
	      label: {
	        show: false
	      },
	      labelLine: {
	        show: false
	      },
	      color: "rgba(0,0,0,0)",
	      borderWidth: 0
	    },
	    emphasis: {
	      color: "rgba(0,0,0,0)",
	      borderWidth: 0
	    }
	  };
	    // 仪表盘外层
	  var roundList = [
	    {
	      type: "pie",
	      z:1,
	      hoverAnimation: false, //鼠标经过的特效
	      radius: ["50%", "55%"],
	      center: ["40%", "50%"],
	      startAngle: 180,
	      labelLine: {
	        normal: {
	          show: false
	        }
	      },
	      label: {
	        normal: {
	          position: "center"
	        }
	      },
	      data: [
	        {
	          value: 100, // 显示长度
	          itemStyle: {
	            normal: {
	              color: "rgba(236,172,112, 0)" // 橙色 1
	            }
	          }
	        },
	        {
	          value: 100, // 总长度
	          itemStyle: placeHolderStyle
	        }
	      ]
	    },
	  
	    {
	      type: "pie",
	      z:2,
	      hoverAnimation: false, //鼠标经过的特效
	      radius: ["50%", "55%"], // 内半径、外半径
	      center: ["40%", "50%"], // 圆心坐标, 距离左侧、顶部
	      startAngle: 180, // 0 为圆心左侧开始，起始角度，支持范围[0, 360]。
	      labelLine: {
	        normal: {
	          show: false
	        }
	      },
	      label: {
	        normal: {
	          position: "center"
	        }
	      },
	      data: [
	        {
	          value: 23,
	          itemStyle: {
	            normal: {
	              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                       // 0% 处的颜色   
	                      offset: 0, color: '#7D6CFC'  },
	                     {
	                      // 100% 处的颜色
	                     offset: 1, color: '#FF7368' 
	                    }], false)
	            }
	          }
	        },
	         {
	          value: 0.5,
	          itemStyle: {
	            normal: {
	              color: "#fff"
	            }
	          }
	        },
	         {
	          value: 40,
	          itemStyle: {
	            normal: {
	              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                       // 0% 处的颜色   
	                      offset: 0, color: '#569FE5'  },
	                     {
	                      // 100% 处的颜色
	                     offset: 1, color: '#786DFB' 
	                    }], false)
	            }
	          }
	        },
	         {
	          value: 0.5,
	          itemStyle: {
	            normal: {
	              color: "#fff"
	            }
	          }
	        },
	        {
	          value: 20,
	          itemStyle: {
	            normal: {
	              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                       // 0% 处的颜色   
	                      offset: 0, color: '#53C1BF'  },
	                     {
	                      // 100% 处的颜色
	                     offset: 1, color: '#54E099' 
	                    }], false)
	            }
	          }
	        },
	        {
	          value: 100,
	          itemStyle: placeHolderStyle
	        }
	      ]
	    },
	  
	    //上层环形配置
	    {
	      type: "pie",
	      z:4,
	      hoverAnimation: false, //鼠标经过的特效
	      radius: ["50%", "55%"], // 内半径、外半径
	      center: ["40%", "50%"], // 圆心坐标, 距离左侧、顶部
	      startAngle: 180, // 0 为圆心左侧开始，起始角度，支持范围[0, 360]。
	      labelLine: {
	        normal: {
	          show: false
	        }
	      },
	      label: {
	        normal: {
	          position: "center"
	        }
	      },
	      data: [
	        {
	          value: 0,
	          itemStyle: {
	            normal: {
	              color: "rgba(170,185,227,1.0)" // 3 紫色
	            }
	          }
	        },
	        {
	          value: 100,
	          itemStyle: placeHolderStyle
	        }
	      ]
	    }
	  ]; 
	  
	  var bg = [
	    {
	      type: "pie",
	      radius: "40%", // 半径
	      center: [
	        // 圆心
	        "40%",
	        "50%"
	      ],
	      z: 1,
	      itemStyle: {
	        normal: {
	          color: {
	            type: "linear",
	            x: 0,
	            y: 0,
	            x2: 0,
	            y2: 1,
	            colorStops: [
	              {
	                offset: 0,
	                color: "#ffffff" // 0% 处的颜色
	              },
	              {
	                offset: 1,
	                color: "#F6F5A6" // 100% 处的颜色
	              }
	            ],
	            global: false // 缺省为 false
	          },
	          label: {
	            show: false
	          },
	          labelLine: {
	            show: false
	          }
	        }
	      },
	      hoverAnimation: false,
	      label: {
	        show: false
	      },
	      tooltip: {
	        show: false
	      },
	      data: [
	        {
	          value: 70 // 背景部分
	        },
	        {
	          value: 30, // 空缺部分
	          itemStyle: {
	            color: "transparent"
	          }
	        }
	      ],
	      startAngle: 216
	    }
	  ];
	  
	  var pointer = [
	    {
	      name: "指针",
	      type: "gauge",
	      title: {
	        show: false
	      },
	      detail: {
	        show: false
	      },
	      data: [
	        {
	          value: 35
	        }
	      ],
	      radius: "55%", // 内半径、外半径
		  startAngle: 180,
		  endAngle: -345,
	      center: ["40%", "50%"], // 圆心坐标, 距离左侧、顶部
	      itemStyle: {
	        color: "#000"
	      },
	      axisLine: {
	        lineStyle: {
	          show: false,
	          width: 0
	        }
	      },
	      axisLabel: {
	        show: false
	      },
	      axisTick: {
	        show: false
	      },
	      splitLine: {
	        show: false
	      },
	      pointer: {
	        show: true,
	        length: "80%",
	        width: 40
	      }
	    }
	  ]; 
	    
	    
	     var circles = [
	    	    {
	    	      type: "pie",
	    	      radius: "80", // 半径
	    	      center: [
	    	        // 圆心
	    	        "40%",
	    	        "50%"
	    	      ],
	    	      z:98,
	    	      itemStyle: {
	    	        normal: {
	    	          color: "#fff",
	    	          label: {
	    	            show: true
	    	          },
	    	          labelLine: {
	    	            show: false
	    	          },
	    	          shadowColor: "rgba(122, 122, 122, 0.21)",
	    	          shadowBlur: 50
	    	        }
	    	      },
	    	      animation: false,
	    	      tooltip: {
	    	        show: false
	    	      },
	    	      data: [
	    	        {
	    	          value:4.7, // 背景部分
	    	          label: {
	    	            normal: {
	    	              formatter: "{c}",
	    	              position: "center",
	    	              show: true,
	    	              textStyle: {
	    	                fontSize: "30",
	    	                fontFamily: "Impact",
	    	                fontWeight: "normal",
	    	                color: "#4a4a4a"
	    	              }
	    	            }
	    	          }
	    	        },
	    	         {
	    	          value:"平均分", // 背景部分
	    	          label: {
	    	            normal: {
	    	              formatter: "{c}",
	    	              position: "center",
	    	              show: true,
	    	              textStyle: {
	    	                fontSize: "30",
	    	                fontFamily: "Impact",
	    	                fontWeight: "normal",
	    	                color: "#4a4a4a"
	    	              }
	    	            }
	    	          }
	    	        },
	    	      ],
	    	      startAngle: 0,
	    	      text: "36%",
	    	      textStyle: {
	    	        color: "#000"
	    	      }
	    	    },
	    	  ];
	   
	    var texts = []; 
	    
	    
	  option = {
	    backgroundColor: "#fff",
	    title: [
	      {
	        text: "差",
	        left: "19%",
	        top: "39%",
	        textAlign: "center",
	        textStyle: {
	          fontWeight: "normal",
	          fontFamily: "PingFangSC-Semibold",
	          fontSize: "12",
	          color: "#78828A",
	          textAlign: "center"
	        }
	      },
	       {
	        text: "一般",
	        left: "38%",
	        top: "18%",
	        textAlign: "center",
	        textStyle: {
	          fontWeight: "normal",
	          fontFamily: "PingFangSC-Semibold",
	          fontSize: "12",
	          color: "#78828A",
	          textAlign: "center"
	        }
	      },
	      {
	        text: "满意",
	        left: "62%",
	        top: "41%",
	        textAlign: "center",
	        textStyle: {
	          color: "#78828A",
	          fontFamily: "PingFangSC-Semibold",
	          fontWeight: "normal",
	          fontSize: "12",
	          textAlign: "center"
	        }
	      },
		  {
			text: "平均分",
			left: "39.5%",
			top: "52.5%",
			z:999,
			textAlign: "center",
			textStyle: {
			  color: "#78828A",
			  fontFamily: "PingFangSC-Semibold",
			  fontWeight: "normal",
			  fontSize: "12",
			  textAlign: "center"
			}
		   }
	    ],
	    series: [
	      ...bg, // 背景
	      ...roundList, // 最外面顶部样式
	      ...pointer, // 指针
	      ...circles, // 中间圆圈部分
	      ...texts // 左右侧文字
	    ]
	  };
	  
      myChart.setOption(option);
      // 自适应图表
      window.onresize = function(){
        myChart.resize();
      }
 
     
       </script>
   </body>
</html>